<template>
  <div class="app-container">
    <textarea type="textarea" class="form-control" id="code" name="code" v-model="value"></textarea>
  </div>
</template>

<script>
import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/clike/clike'
import 'codemirror/mode/go/go'
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/http/http'
import 'codemirror/mode/php/php'
import 'codemirror/mode/python/python'
import 'codemirror/mode/http/http'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/vue/vue'
import 'codemirror/mode/xml/xml'
export default {
  filters: {
  },
  data() {
    return {
      value: '',
      CodeMirrorEditor: null
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      let myTextarea = document.getElementById('editor');
      this.CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
        mode:'javascript',//编辑器语言
        theme:'monokai', //编辑器主题
        extraKeys: {"Ctrl": "autocomplete"},//ctrl能够弹出选择项
        lineNumbers: true//显示行号
      });
    }
  }
}
</script>
